Description

This feature allows for the tracing of rendering metrics to come up on Monitoring Cloud. When the configurations are set to be enabled, each step of the react rendering process is timed with a span. The spans are connected to a single trace that is visible on Monitoring Cloud after some time.

Merges in this PR + some more commits:

• @W-18760799 - E2E tests for SSR logs with B3-Traceid header #3028
• @W-18760633 - Updating react-rendering.js to trace the performance of the SSR process #2834
• @W-18759774 - Created opentelemetry.js file with utility functions to log OTel spans and metrics #2705
• @W-18760780 Integrate opentelemetry into performance.js #2722

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• (change1) E2E tests for server timing header and x-b3 header
• (change2) Wrap render with rootSpan creation
• (change3) For each SSR metric, create an opentelemetry span
• (change4) Add x-b3 headers creation

How to Test-Drive This PR

On an environment with tracing enabled except SERVER_TIMING

1. Open a new tab
2. Open the developer tools and go to Network. Be filtering for "_server"
3. Go to https://aaa-wasatch-test.mobify-storefront-staging.com/?__server_timing
4. Click on the network request, and see that you can see the ServerTiming header. Copy the x-b3-traceid
5. Go to https://monitoring.internal.salesforce.com/argusmvp/#/dashboards/8764299?traceId=null
   -> Note: it may take some time for the traces to show up on monitoring cloud. Metrics get loaded one by one, so sometimes you might see some metrics missing. Search for the traceid again and it will show up
6. On the top left corner, click Find a Trace by traceid and paste the trace Id and search
7. See that you can see the durations for these metrics:

ssr.render
ssr.total
ssr.route-matching
ssr.load-component
ssr.fetch-strategies
ssr.fetch-strategies.react-query.pre-render
ssr.fetch-strategies.react-query.use-query.usecategory
ssr.fetch-strategies.react-query.use-query.1
ssr.fetch-strategies.react-query.use-query.useproductsearch
ssr.render-to-string

On an environment with tracing enabled, including SERVER_TIMING

1. Open a new tab
2. Open the developer tools and go to Network. Be filtering for "aaa-wasatch"
3. Go to https://aaa-wasatch-testing.mobify-storefront-staging.com/
4. Click on the network request, and see that you can see the ServerTiming header. Copy the x-b3-traceid header
5. Go to https://monitoring.internal.salesforce.com/argusmvp/#/dashboards/8764299?traceId=null
   -> Note: it may take some time for the traces to show up on monitoring cloud. Metrics get loaded one by one, so sometimes you might see some metrics missing. Search for the traceid again and it will show up
6. On the top left corner, click Find a Trace by traceid and paste the trace Id and search
7. See that you can see the durations for these metrics:

ssr.render
ssr.total
ssr.route-matching
ssr.load-component
ssr.fetch-strategies
ssr.fetch-strategies.react-query.pre-render
ssr.fetch-strategies.react-query.use-query.usecategory
ssr.fetch-strategies.react-query.use-query.1
ssr.fetch-strategies.react-query.use-query.useproductsearch
ssr.render-to-string

On an environment with tracing disabled

1. Open a new tab
2. Open the developer tools and go to Network. be filtering for "test-standard"
3. Go to https://aaa-wasatch-test-standard.mobify-storefront-staging.com/
4. Click on the network request, and see that you don't see the ServerTiming header or other headers starting with x-b3

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)